<template>
  <div class="robot-list-container">
    <!-- 顶部导航 -->
    <van-nav-bar
        title="搜索"
        left-arrow
        @click-left="goBack"
        class="nav-bar"
    />
    <van-row>
      <van-col span="21">
    <div class="search-section" style="margin: 10px;" >
      <van-search
          @touchstart.stop="show = true"
          v-model="value"
          class="custom-search"
          placeholder="请输入完整的手机号"
          background="#ffffff"
          :round="true"
          :show-action="false"
      >
        <template #left-icon>
          <van-icon name="search" size="18" style="padding-left: 5px;padding-right: 5px;" />
        </template>
      </van-search>
    </div>
      </van-col>
      <van-col span="3">
        <div class="search-section" style="margin-top: 20px;" @click="search">
        <span>搜索</span>
        </div>
      </van-col>
    </van-row>

     <van-row v-if="list" style="padding: 0px 10px;">


      <div class="friend-item">
      <!-- 头像 -->
      <van-image
        round
        width="48px"
        height="48px"
        :src="list.avatar"
        class="avatar"
      />

      <!-- 姓名 -->
      <span class="name">{{ list.realname }}</span>

      <!-- 添加按钮 -->
      <van-button
        v-if="!list.friends"
        type="primary"
        size="small"
        @click="savelist"
        class="add-btn"
      >
        添加
      </van-button>
      <van-button
        v-else
        size="small"
        disabled
        class="add-btn added"
      >
        已添加
      </van-button>
    </div>

  </van-row>

    <van-number-keyboard
        v-model="value"
        :show="show"
        @blur="show = false"
    />
  </div>
</template>

<script>
import {getAction,getFileAccessHttpUrl} from "../../api";

export default {
  name: "addfriend",
  data(){
    return{
      show:true,
      value:'',
      list:'',
    }
  },
  mounted() {
  },
  methods:{
    goBack(){
      this.$router.push({name: 'contact'})
    },
    search(){
      getAction("/sys/chat/bot/searchPhone",{phone:this.value}).then(res=>{
        if(res.code===200){
          this.list=res.result;
            this.list.avatar = this.list.avatar ? getFileAccessHttpUrl(this.list.avatar) : '/static/mobile/img/common/user_default.webp';
        }else{
          this.list='';
          this.$toast.fail(res.message)
        }
      })
    },
    savelist(){
      this.$router.push({name: 'friendverification',params:this.list})
    }
  }
}
</script>

<style scoped>
.robot-list-container {
  background-color: #f4f8f9;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
/deep/ .van-search{
  border-radius: 6px;
  padding: 5px 5px;
}
/deep/ .van-search__content{
  background-color: white !important;
  padding-left:0px !important;
}
.add-friend-page {
  padding: 16px;
  background-color: #f7f8fa;
  min-height: 100vh;
}

.friend-item {
  display: flex;
  align-items: center;
  background-color: #ffffff;
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 10px;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05);
}

.avatar {
  margin-right: 16px;
}

.name {
  flex: 1;
  font-size: 16px;
  color: #323233;
  font-weight: 500;
}

.add-btn {
  width: 70px;
}

.add-btn.added {
  color: #969799;
  border-color: #ebedf0;
  background: #f7f8fa;
}
</style>
